<template>
	<!-- 按钮框 -->
	<view class="menu-list" :style="{gridTemplateRows:`repeat(${rows},1fr)`,gridTemplateColumns:`repeat(${colums}, 1fr)`}">
		<view class="menu-list-item"  v-for='(item,index) in menuList' :key="index">
			<image :src="item.imgSrc" class="item-image" mode=""></image>
			<span>{{item.text}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MenuList',
		props: {
			menuList: {
				type: Array,
				default: () => {
					return [{
							imgSrc: '/static/images/pages/mine/会员码@2x.webp',
							text: '会员码'
						},
						{
							imgSrc: '/static/images/pages/mine/兑换中心@2x.webp',
							text: '兑换中心'
						},
						{
							imgSrc: '/static/images/pages/mine/领券中心@2x.webp',
							text: '领券中心'
						},
						{
							imgSrc: '/static/images/pages/mine/充值中心@2x.webp',
							text: '充值中心'
						},
						{
							imgSrc: '/static/images/pages/mine/加盟合作@2x.webp',
							text: '加盟合作'
						},
						{
							imgSrc: '/static/images/pages/mine/兑换中心@2x.webp',
							text: '兑换中心'
						},
						{
							imgSrc: '/static/images/pages/mine/评论@2x.webp',
							text: '评论'
						},
					]
				}
			},
			colums: {
				type: Number || String,
				default: () =>4
			}
		},
		data() {
			return {}
		},
		computed: {
			rows() {
				return Math.ceil(this.menuList.length / parseInt(this.colums))
			}
		}
	}
</script>

<style lang="scss" scoped>
	//菜单按钮
	.menu-list {
		font-family: 'siyuan';
		width: 700rpx;
		// height: 336rpx;
		background-color: #fff;
		border-radius: 12rpx;
		// overflow: hidden;
		box-shadow: 0rpx 0rpx 2rpx 0px $shadow-color;
		display: grid;
		// /* 宽度平均分成4份 */
		// grid-template-columns: repeat(4, 1fr);
		// /* 高度平均分成3份 */
		// grid-template-rows: repeat(2, 1fr);

		.menu-list-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 168rpx;
			.item-image {
				width: 84rpx;
				height: 84rpx;
			}

			span {
				margin-top: 6rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: $main-text;
			}
		}
	}
</style>
